<template>
<div class="common-layout">    <el-container>      <el-menu @select="handleSelect">        <el-menu-item index="1">          <el-icon><document /></el-icon>          <span>门店信息</span>        </el-menu-item>        <el-menu-item index="2">          <el-icon><document /></el-icon>          <span>项目管理</span>        </el-menu-item>
		<el-menu-item index="3">
		  <el-icon><document /></el-icon>
		  <span>日期管理</span>
		</el-menu-item>
		<el-menu-item index="4">
		  <el-icon><document /></el-icon>
		  <span>课程管理</span>
		</el-menu-item>
		<el-menu-item index="5">
		  <el-icon><document /></el-icon>
		  <span>学生管理</span>
		</el-menu-item>      </el-menu>      <el-main>
		   <component :is="selectedComponent"></component>      </el-main>    </el-container>  </div>
  </template>
<script setup lang="ts">
import TestCount from '../components/TestCount.vue'
import HelloWorld from '../components/HelloWorld.vue'
import Date from '../components/Date.vue'
import Course from '../components/Course.vue'
import Student from '../components/Student.vue'

import { ref } from 'vue'
const selectedComponent= ref(TestCount);

const topBtn = ref([   { id: 1, name: '门店信息' ,component:TestCount},   { id: 2, name: '项目管理' ,component:HelloWorld},
   { id: 3, name: '日期管理' ,component:Date},
   { id: 4, name: '课程管理' ,component:Course},
   { id: 5, name: '学生管理' ,component:Student} ])
 const handleSelect = (key: string, keyPath: string[]) => {    selectedComponent.value = topBtn.value[parseInt(key)-1].component; }
	
</script><style lang="scss" scoped>.el-container {    height: 100%;  }.el-menu{      margin-top: 10px;      margin-right: 25px;      height:100%;      border:1px    }.el-main {             margin-left: 40px;      }</style>